<template>
    <view v-if="isLoad">
        <view class="qrcodePage" v-if="qrcodeSrc">
            <view class="p30 topBox bgf">
                <view style="word-break: break-all;" class="">
                    您的{{o.t=='hk'?'获客':'推广'}}二维码链接是：{{qrcodeUrl}}
                    <text class="sc1 pl20" @click="copyFn">复制</text>
                </view>
            </view>

            <image :src="qrcodeSrc" class="qrimg" mode="widthFix"></image>
            <view class="footBtn" @click="upImg">更换{{o.t=='hk'?'获客':'推广'}}二维码</view>
        </view>
        <view v-else class="p30">
            <view style="word-break: break-all;" class="mb40">
                您的{{o.t=='hk'?'获客':'推广'}}二维码链接是：{{qrcodeUrl}}
                <text class="sc1 pl20" @click="copyFn">复制</text>
            </view>
            <view class="mb40 f32 fw8">请上传</view>
            <view class="fw" style="gap: 20rpx;">
                <image src="/static/up.png" class="img2" @click="upImg"></image>
                <image :src="img" class="img2"></image>
            </view>


        </view>


        <view class="content" v-if="0">
            <view class="title" v-if="userCode">客户</view>
            <image :src="userCode" v-if="userCode" class="img"></image>
            <view class="title" v-if="staffCode">兼职</view>
            <image :src="staffCode" v-if="staffCode" class="img"></image>

            <canvas canvas-id="qrcode" class="wh260" />
            <canvas canvas-id="qrcode2" class="wh260" />

        </view>
    </view>


</template>

<script>
    import api from '@/api/api.js';
    import uQRCode from '@/common/uqrcode.js'
    export default {
        data() {
            return {
                userCode: '', //客户 /pages/customer/add?createUserId=1
                staffCode: '', //兼职 /pages/customer/add2?createUserId=1
                role: '',
                qrcodeSrc: '',
                qrcodeUrl: '',
                isLoad: 0,
                o: '',
                img: '',
            }
        },
        async onLoad(o) {
            this.o = o
            let u = await api.getUserInfo({})
            let id = u.user.userId
            console.log(444, u);
            //获取二维码
            let t = o.t
            if (t == 'tg') {
                this.qrcodeUrl =
                    `https://www.jyjkyqhl.com/#/pages/customer/add2?t=tg&createUserId=${id}`
                this.qrcodeSrc = u.user.proUrl == "bushiurl" ? '' : u.user.proUrl
            } else if (t == 'hk') {
                this.qrcodeUrl =
                    `https://www.jyjkyqhl.com/#/pages/customer/add?t=hk&createUserId=${id}`
                uni.setNavigationBarTitle({
                    title: `获客码`
                })
                this.qrcodeSrc = u.user.acqUrl == "bushiurl" ? '' : u.user.acqUrl
            }
            this.isLoad = 1


        },
        async onShow() {
            return
            uni.showLoading()
            this.role = this.getS('role')
            let domain = `https://www.jyjkyqhl.com:7778/index.html#`
            let u = await api.getUserInfo({})
            let id = u.user.userId
            let text = `${domain}/pages/customer/add?createUserId=${id}`
            let text2 = `${domain}/pages/customer/add2?createUserId=${id}`
            uQRCode.make({
                canvasId: 'qrcode',
                text,
                size: 150,
                margin: 10,
                success: res => {
                    this.userCode = res
                    if (this.role != '业务员') return
                    uQRCode.make({
                        canvasId: 'qrcode',
                        text: text2,
                        size: 150,
                        margin: 10,
                        success: res => {
                            this.staffCode = res

                        }
                    })
                    uni.hideLoading()
                }
            })



        },
        methods: {
            upImg() {
                uni.chooseImage({
                    count: 1,
                    success: (r) => {
                        console.log(r);
                        let filePath = r.tempFilePaths[0]
                        uni.uploadFile({
                            url: `https://www.jyjkyqhl.com:7778/app/common/upload`,
                            filePath,
                            name: 'file',
                            success: (r) => {
                                console.log(r, JSON.parse(r.data));
                                this.img = JSON.parse(r.data).url
                                if (this.o.t == 'tg') { //兼职
                                    api.setProUrl({ proUrl: this.img }).then(r => {
                                        this.qrcodeSrc = this.img
                                    })
                                } else { //获客
                                    api.setAcqUrl({ acqUrl: this.img }).then(r => {
                                        this.qrcodeSrc = this.img
                                    })
                                }

                            },
                            complete: (e) => {
                                console.log('eee', e);
                            }
                        })
                    }
                })
            },
            copyFn() {
                uni.setClipboardData({
                    data: this.qrcodeUrl,
                    complete: (e) => {
                        console.log(666, e);
                    }
                })
            }
        }
    }
</script>
<style>
    page {
        background-color: #fff;
    }
</style>
<style scoped lang="scss">
    .qrcodePage {
        width: 750rpx;
        height: 100vh;
        position: relative;

        .topBox {
            position: relative;
            z-index: 999;
        }

        .qrimg {
            width: 750rpx;
            height: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 996;
        }

        .footBtn {
            position: absolute;
            width: 690rpx;
            height: 80rpx;
            bottom: 50rpx;
            left: 30rpx;
            z-index: 99999;
            background-color: #39b54a;
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            font-weight: 800;
            color: #fff;
            z-index: 999;
        }
    }

    .content {
        padding-top: 80rpx;

        .title {
            text-align: center;
            font-size: 36rpx;
            font-weight: 800;
            margin-bottom: 10rpx;
        }

        .img {
            width: 400rpx;
            height: 400rpx;
            display: block;
            margin: 0 auto;
            margin-bottom: 100rpx;
        }
    }

    .wh260 {
        width: 260rpx;
        height: 260rpx;
        opacity: 0;
    }

    .img2 {
        width: 200rpx;
        height: 200rpx;
    }
</style>